<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/axios.min.js"></script>
    <script src="/js/query.js"></script>
    <script src="/student/js/stu.js"></script>
    <style>
        body{
            display: flex;
            flex-wrap: wrap;
        }
        .table{
            width: 100%;
            height: auto;
            border: 1px solid blueviolet;
        }
        .button{
            width: 100%;
            display: flex;
            justify-content: space-around;
        }

        .queryStuInfo{
            width: 500px;
            height: 500px;
            position: absolute;
            top: 390px;
            right: 20px;
        }

        .content{
            border: 3px solid #000;
            width: 300px;
            height: 300px;
            padding: 50px;
            background-color: white;
            display: flex;
            flex-wrap: wrap;
        }

        .content div{
            margin-top: 10px;
            margin-bottom: 10px;
            width: 400px;
            height: 40px;

        }

        .content>div:first-child{
            display: flex;
            justify-content: center;
        }

        .content>div:last-child{
            display: flex;
            justify-content: space-around;
            height: 30px;
        }

        .content>div:first-child>h3{
            margin: 0;
        }

        .Info{
            background-color: rgba(255,0,0,0.2);
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            visibility: hidden;
        }
        .div1{
            top:400px ;
            right:40px;
            position: absolute;
        }
        .div{
            margin-top: 50px;
            margin-left: 30px;
        }
        .info2{
            position: relative;
        }
        .imgDiv{
           top:40px ;
            right:-50px;
            position: absolute;
        }
        .imgDiv1{
            top:40px ;
            right:20px;
            position: absolute;
        }
        .button{
            top: 350px;
            right: 20px;
            position: absolute;
        }
        .button1{
            width: 40px;
            height: 40px;
            top: 350px;
            left: 40px;
            position: absolute;
        }
    .info3{
        background-color: rgba(255,0,0,0.2);
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        visibility: hidden;
    }
       .button12 {
            width:100px;
           height: 30px;
            text-align:center;
            line-height:100%;
            padding:0.3em;
            font:16px Arial,sans-serif bold;
            font-style:normal;
            text-decoration:none;
            margin:2px;
            vertical-align:text-bottom;
            zoom:1;
            outline:none;
            font-size-adjust:none;
            font-stretch:normal;
            border-radius:50px;
            box-shadow:0px 1px 2px rgba(0,0,0,0.2);
            text-shadow:0px 1px 1px rgba(0,0,0,0.3);
            color:#fefee9;
            border:0.2px solid #2299ff;
            background-repeat:repeat;
            background-size:auto;
            background-origin:padding-box;
            background-clip:padding-box;
            background-color:#3399ff;
            background: linear-gradient(to bottom, #eeeff9 0%,#3399ff 100%);
        }

        .button12:hover {
            background: #268DFF;
        }
    </style>

</head>
<body>
<div style="width: 100%;height: 100%">
    <table class="table" cellspacing="0">
        <thead><tr><th>学生姓名</th><th>性别</th><th>班级</th><th>所在房间</th><th>联系电话</th><th>操作</th></tr></thead>
        <tbody id="data" style="text-align: center"></tbody>
    </table>
</div>
<div id="cutDiv"></div>
<div class="button1" >
    <input type="button" value="学生入住" onclick="addstu()" class="button12">
</div>

<div class="queryStuInfo">
    <div class="content" >
        <div><h3>查询学生信息</h3></div>
        <div >学生姓名<input type="text" name="stuName" id="nameTxt" style="margin-left: 10px"></div>
        <div style=padding-right:20px>班&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;级<input type="text" name="stuClass" id="classTxt" style="margin-left: 12px"></div>
        <div>所在房间<input type="text" name="stuRoom" id="roomTxt"style="margin-left: 10px"></div>
        <div>
            <input type="button" value="查找" onclick="findAll(1)"  class="button12">
        </div>
    </div>
</div>
<div class="Info" id="info">
    <div style="width: 500px;height: 500px;border: 1px solid black ;background-color: white " class="info2">
        <div style="text-align: center"><h3>学生信息一览</h3></div>
        <div class="div">姓名:<span id="nameSpan" class="infoSpan" style="margin-left: 20px"></span> </div>
        <div class="div">性别:<span id="genderSpan" class="infoSpan" style="margin-left: 20px"></span></div>
        <div class="div">班级:<span id="classSpan" class="infoSpan" style="margin-left: 20px"></span></div>
        <div class="div">房间:<span id="roomSpam"class="infoSpan" style="margin-left: 20px"></span></div>
        <div class="div">入住时间:<span id="dateSpan"class="infoSpan" style="margin-left: 20px"></span></div>
        <div class="div">联系电话:<span id="phoneSpan"class="infoSpan"style="margin-left: 20px"></span> </div>
        <div class="imgDiv1"><img src=""width="150px"height="200px" id="faceImg"></div>
        <div class="div1"><input type="button" value="确定" onclick="affirm()"  class="button12"></div>

    </div>
</div>
<div class="info3" id="add">
    <div style="width: 500px;height: 500px;border: 1px solid black ;background-color: white " class="info2">
        <div style="text-align: center"><h3>添加学生</h3></div>
        <div class="div">姓名:<input type="text" id="nameTxt1"></div>
        <div class="div">性别:<input id="man" type="radio" checked="checked" name="sex" onchange="sex('男')"/>男<input id="woman" type="radio"  name="sex" onchange="sex('女')"/>女</div>
        <div class="div">房间:
            <select name="" id="room" style="width: 150px ;height: 30px;margin-left: 20px">
            </select>
            </div>
        <div class="div">班级: <select name="" id="class" style="width: 150px ;height: 30px;margin-left: 20px">

        </select>
        </div>
        <div class="div">电话:<input type="text" id="phone" style="width: 150px ;margin-left: 20px"></div>
        <div class="imgDiv"><img src="" alt="" width="150px"height="200px" id="faceImg1"><br>
            <input type="file" name="" id="fileTxt" onchange="changFace()" >
        </div>
        <div class="button"><input type="button" value="添加" style="margin-left: 300px" onclick="add()"  class="button12" ><input type="button" value="取消" onclick="affirm()"  class="button12"></div>
    </div>
</div>

<div class="info3" id="update">
    <div style="width: 500px;height: 500px;border: 1px solid black ;background-color: white " class="info2">
        <div style="text-align: center"><h3>学生更换房间</h3></div>
        <input type="hidden"  id="stuid">
        <div class="div">姓名:<span id="nameSpan2" class="infoSpan" style="margin-left: 20px"></span> </div>
        <div class="div">性别:<span id="genderSpan2" class="infoSpan" style="margin-left: 20px"></span></div>
        <div class="div">原来房间:<span id="roomSpam2"class="infoSpan" style="margin-left: 20px"></span></div>
        <div class="div">班级<span id="classSpan2"class="infoSpan" style="margin-left: 20px"></span></div>
        <div class="div">新房间 <select name="" id="room1" style="width: 150px ;height: 30px;margin-left: 20px">

        </select></div>
        <div class="imgDiv1"><img src=""width="150px"height="200px" id="faceImg2" style="background: black"></div>
        <div style="margin-left: 350px"><input type="button" value="确定" onclick="confirm()"  class="button12"></div>
    </div>
</div>

</body>
</html>